<template>
  <span @click="clickWelcome">{{ welcome }}</span>
</template>

<script>
// export默认导出
export default {
  // 创建、挂载、更新、卸载
  setup() {
    console.log("setup()")
  },
  beforeCreate: function beforeCreate() {
    console.log("options api, beforeCreate()")
  },
  created() {
    console.log("options api, created()")
  },
  beforeMount() {
    console.log("options api, beforeMount()")
  },
  mounted() {
    console.log("options api, mounted()")
  },
  beforeUpdate() {
    console.log("options api, beforeUpdate()")
  },
  updated() {
    console.log("options api, updated()")
  },
  beforeUnmount() {
    console.log("options api, beforeUnmount()")
  },
  unmounted() {
    console.log("options api, unmounted()")
  },
    // ES6 简写, 完整写法：data: function data() {}
  data() {
    return {
      welcome: "Hello World"
    }
  },
  methods: {
    // ES6 简写，完整写法: clickWelcome: function clickWelcome() {}
    clickWelcome() {
      this.welcome = "Hello Vue3"
    }
  }
}
</script>

<style scoped></style>
